<template>
	<view class="tabbarpage-container">
		<!--胶囊上方-->
		<view :style="{'padding-top': statusBarHeight}"></view>

		<!--胶囊-->
		<view class="page-header-back" :style="{ 'height': capsuleHeight }">
			<navigator open-type="navigateBack" hover-class="navigator-hover">
				<view class="back-icon">
					<wd-icon name="thin-arrow-left" size="18px"></wd-icon>
				</view>
			</navigator>
			<view class="title">
				学习目标
			</view>
			<view style="width: 18px">
				<!-- placeholder for symmetry -->
			</view>

		</view>

		<!--主体-->
		<view class="tabbarpage-body">
			<view class="target-pg-container">
				<picker @change="bindPickerChange" :value="index" :range="correctArr">
					<view class="target-pg-card dark-purple-card">
						<view style="display: flex; align-items: center; gap: 20px;">
							<view class="target-pg-icon">
								<!-- 待插入 -->
							</view>
							<view class="target-pg-text">
								<view class="target-pg-title">整理错题</view>
								<view class="target-pg-content">目标 {{ correctArr[index] }} 道</view>
							</view>
						</view>
						<view class="arrow">
							<wd-icon name="chevron-right-circle" size="30px"></wd-icon>
						</view>
					</view>
				</picker>
			</view>
			<view class="target-pg-container">
				<picker @change="bindPickerChange2" :value="index2" :range="reviewArr">
					<view class="target-pg-card dark-purple-card">
						<view style="display: flex; align-items: center; gap: 20px;">
							<view class="target-pg-icon">
								<!-- 待插入 -->
							</view>
							<view class="target-pg-text">
								<view class="target-pg-title">回顾错题</view>
								<view class="target-pg-content">目标 {{ reviewArr[index2] }} 道</view>
							</view>
						</view>
						<view class="arrow">
							<wd-icon name="chevron-right-circle" size="30px"></wd-icon>
						</view>
					</view>
				</picker>
			</view>
			<view class="target-pg-container">
				<picker @change="bindPickerChange3" :value="index3" :range="AIStudyArr">
					<view class="target-pg-card dark-purple-card">
						<view style="display: flex; align-items: center; gap: 20px;">
							<view class="target-pg-icon">
								<!-- 待插入 -->
							</view>
							<view class="target-pg-text">
								<view class="target-pg-title">智能巩固</view>
								<view class="target-pg-content">目标 {{ AIStudyArr[index3] }} 道</view>
							</view>
						</view>
						<view class="arrow">
							<wd-icon name="chevron-right-circle" size="30px"></wd-icon>
						</view>
					</view>
				</picker>
			</view>

		</view>

	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { globalProps } from '@/js/global.js'

const statusBarHeight = ref(globalProps.statusBarHeight)
const capsuleHeight = ref(globalProps.capsuleHeight)

const correctArr = ref([])
const reviewArr = ref([])
const AIStudyArr = ref([])

const bindPickerChange = (e) => {
	console.log('picker发送选择改变，携带值为：' + e.detail.value)
	index.value = e.detail.value
}

const bindPickerChange2 = (e) => {
	console.log('picker发送选择改变，携带值为：' + e.detail.value)
	index2.value = e.detail.value
}

const bindPickerChange3 = (e) => {
	console.log('picker发送选择改变，携带值为：' + e.detail.value)
	index3.value = e.detail.value
}

const index = ref(0)
const index2 = ref(0)
const index3 = ref(0)

onMounted(() => {
	console.log('mounted')
	for (let i = 1; i <= 100; i++) {
    	correctArr.value.push(i);
	}
	for (let i = 1; i <= 100; i++) {
		reviewArr.value.push(i);
	}
	for (let i = 1; i <= 100; i++) {
		AIStudyArr.value.push(i);
	}
})

</script>

<style>
	@import "@/css/global.css";
	@import "@/css/animation.css";
	.target-pg-container{
		/* background-color: gray; */
		margin: 15px 20px;
	}
	page{
		color:white;
	}

	.target-pg-card{
        display: flex;
		justify-content: space-between;
		align-items: center;
        padding: 25px 20px;
        border-radius: 15px;
    }

	.target-pg-icon{
		width: 50px;
		height: 50px;
		background-color: #f5f5f5;
		border-radius: 50%;
		margin-right: 15px;
	}

	.target-pg-text{
		line-height: 2;
	}
	.target-pg-arrow{
		margin-left: auto;
		width: 30px;
		height: 30px;
	}

	.target-pg-title{
		font-size: 18px;
		font-weight: bold;
	}

	.target-pg-content{
		font-size: 14px;
		color: #aaa;
	}
</style>
